<template>
    <div class="seq-container" ref="container" :style="{width: containerWidthPx}">
        <div class="seq-header">
            <template v-for="(item) in headers">
            <div class="seq-header-col" :style="{width:realColWidth-2+'px'}" :key="item" ><span>{{item}}</span></div>
            </template>
        </div>

        <div class="seq-body"  :style="{width: containerWidthPx}">
            <virtual-list
              class="seq-scroller"
              :style="{width: containerWidthPx}"

              :size="itemHeight"
              :remain="visibleCount"

            >
            <SeqItem v-for="(item,itemIndex) in items"
            :itemIndex="itemIndex" :key="item.id"
            :itemHeight="itemHeight"
            :headers="headers"
            :itemStyle="item.style"
            :itemData="item"
            :lineClick="handleClick(item,itemIndex)"
            >

            </SeqItem>

        </virtual-list>
        </div>
    </div>
</template>

<script>
import virtualList from 'vue-virtual-scroll-list'
import SeqItem from './SeqItem'

export default {
  name: 'SeqDiagram',
  components: {
    SeqItem,
    virtualList
  },
  props: {
    // 头部 ['header1','header2','header3']
    headers: {
      type: Array
    },
    // 数据 [{label:'',from:'',to:'',note:''}]
    items: {
      type: Array
    },
    // item高度 px
    itemHeight: {
      type: Number,
      default: 40
    },
    // item 可见数量
    visibleCount: {
      type: Number,
      default: 16
    },

    // 每一列的宽度，如果不填写，则根据总宽度计算
    colWidth: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      // 必须保持与css中的sideWidth一致，此属性尚不可使用，TODO
      sideWidth: 0,
      // 容器总宽度
      width: 0,
      buffer: 20,
      prerender: 500,
      // 每行的组件
      seqItem: SeqItem,
      colorList: [
        'SteelBlue',
        'coral',
        'DeepSkyBlue',
        'lightgreen',
        'SlateBlue',
        'HotPink',
        'Olive',
        'Sienna',
        'Tan'
      ],
      allData: []
    }
  },

  computed: {
    // 数据量
    itemCount: function() {
      return this.items.length
    },
    // 每一列的宽度
    realColWidth: function() {
      console.log('---------realColWidth-------------')

      if (this.colWidth) {
        return this.colWidth
      }

      // 自己计算宽度
      return this.width / this.headers.length
    },
    containerWidthPx: function () {
      if (this.colWidth) {
        return this.colWidth * this.headers.length + 'px'
      }
      return null
    },

    // 所有线段的位置

    // 所有行的from to 索引
    lineDirectionClassArr: function() {
      console.log('lineDirectionClassArr------------start-----')
      var classArr = []
      if (!this.items || !this.headers) {
        return classArr
      }
      // 把headers转成对象，方便获取{"name":1}
      var headerObj = {}
      for (var i = 0; i < this.headers.length; i++) {
        headerObj[this.headers[i]] = i
      }
      // 计算每个记录对应的line class
      this.items.forEach(item => {
        var fromIndex = headerObj[item.from]
        var toIndex = headerObj[item.to]
        // line direction
        var lineClass = ''
        if (fromIndex < toIndex) {
          lineClass = 'line_right'
        } else if (fromIndex > toIndex) {
          lineClass = 'line_left'
        }
        classArr.push(lineClass)
      })
      console.log('lineDirectionClassArr------------end-----')
      return classArr
    }
  },
  created() {
    // this.allData = this.itemPositionArr()
    // debugger
    // for (let i = 0; i < this.items.length; i++) {
    //   this.items[i].style = this.handleStyle(this.items[i], i)
    //   console.log('处理完' + JSON.stringify(this.items[i].style))
    //   // debugger
    // }
  },
  watch: {
    realColWidth() {
      console.log('发生变化')
      this.allData = this.itemPositionArr()
      this.items.forEach((item, index) => {
        item.style = this.handleStyle(item, index)
      })
      // this.allData = this.itemPositionArr()
      // for (let i = 0; i < this.items.length; i++) {
      //   this.items[i].style = this.handleStyle(this.items[i], i)
      //   console.log('处理完' + JSON.stringify(this.items[i].style))
      // // debugger
      // }
    }
  },
  mounted() {
    var that = this
    this.$nextTick(function () {
      that.width = that.$el.clientWidth
      console.log('width=' + that.width)
    })
  },
  methods: {
    itemPositionArr: function() {
      console.log('itemPositionArr---------start-------------')
      var positionArr = []
      if (!this.items || !this.headers) {
        return positionArr
      }
      // 把headers转成对象，方便获取{"name":1}
      var headerObj = {}
      for (var i = 0; i < this.headers.length; i++) {
        headerObj[this.headers[i]] = i
      }

      this.items.forEach(item => {
        var left = headerObj[item.from] * (this.realColWidth - 1) + this.realColWidth / 2 + headerObj[item.from]
        var right = headerObj[item.to] * (this.realColWidth - 1) + this.realColWidth / 2 + headerObj[item.to]
        positionArr.push({

          line: {
            width: Math.abs(right - left) + 'px',
            left: Math.min(left, right) + 'px'
          },
          label: {
            left: -1 * Math.min(left, right) + 'px'
          },
          spliter: {
            marginLeft: parseInt(this.realColWidth / 2) + 'px',
            marginRight: (this.realColWidth - parseInt(this.realColWidth / 2) - 1) + 'px'
          }
        })
      })

      console.log('itemPositionArr---------end-------------')
      return positionArr
    },
    handleClick(item, itemIndex) {
      let that = this
      return function temp() {
        that.$emit('line-click', itemIndex, item)
      }
    },
    handleStyle(item, itemIndex) {
      // console.log('处理样式' + JSON.stringify(item))
      let mystyle = {
        spliter: this.allData[itemIndex].spliter,
        directionClass: this.lineDirectionClassArr[itemIndex],
        line: this.allData[itemIndex].line,
        label: this.allData[itemIndex].label
      }
      return mystyle
    },
    /**
     * 子组件的属性
     */
    getItemProps: function (itemIndex) {
      var that = this, _itemData = this.items[itemIndex]
      return {
        key: itemIndex,
        props: {
          itemIndex: itemIndex,
          itemHeight: this.itemHeight,
          headers: this.headers,
          itemData: _itemData,
          itemStyle: {
            spliter: this.itemPositionArr[itemIndex].spliter,
            directionClass: this.lineDirectionClassArr[itemIndex],
            line: this.itemPositionArr[itemIndex].line,
            label: this.itemPositionArr[itemIndex].label
          },
          lineClick: function () {
            that.$emit('line-click', itemIndex, _itemData)
          }
        }
      }
    }
  }

}
</script>

<style lang="less" scoped>
//左右两侧空白
@sideWidth: 0px;

@px: 0.0625em;
@small_font_size: 10 * @px;
@midium_font_size: 12 * @px;
@large_font_size: 14 * @px;
@huge_font_size: 16 * @px;
@box_bordercolor: black;

@hover_box_bordercolor: red;
@hover_box_backcolor: #ccc;

    .seq-container {
        // height: 100% ;
       display: flex;
      flex-direction: column;
      margin: 0 @sideWidth ;
    }
    .seq-header {
        display: flex;
        flex: none;
        flex-direction: row;
        align-items: center;
        // padding: 0px @sideWidth ;
        height:50px;

        .seq-header-col{
            border: 1px solid ;
            background-color: #409EFF;
            color: white ;
            font-size: @midium_font_size;
            height:100%;
            line-height: 50px;
            text-align: center ;
            margin: 10px 0px;
            flex-shrink: 0;

            span {
              display: inline-block;
              vertical-align: middle;
              line-height: 14px;
              word-break: break-all;
            }
        }
    }

    .seq-body {
      flex: auto;
      margin: 0 -1*@sideWidth ;
    }

    .self_msg_line:hover {
      cursor: pointer;
      .link {
        border: @px solid @hover_box_bordercolor;
        border-left: 0;
      }
      .arrow:before {
        color: @hover_box_bordercolor;
      }

      .line_label {
        color: @hover_box_bordercolor;
      }
    }

</style>
